<template>
    <div class="bottom-view">
        <!-- 左边关键词搜索 -->
        <el-card shadow="hover" class="view">
            <template #header>
                <div>关键词搜索</div>
            </template>

            <div class="search-view">
                <div class="chart-wrap">
                    <div class="chart">
                        <div class="title">搜索用户数</div>
                        <div class="count">{{ lineChartData.totalUser }}</div>
                        <v-chart :option="getLineOption('userList', '搜索用户数')" autoresize></v-chart>
                    </div>
                    <div class="chart">
                        <div class="title">搜索量</div>
                        <div class="count">
                            {{ lineChartData.totalCount }}
                        </div>
                        <v-chart :option="getLineOption('countList', '搜索量')" autoresize></v-chart>
                    </div>
                </div>
                <div class="search-table">
                    <el-table :data="tableData" :style="{ width: '100%' }">
                        <el-table-column prop="rankNo" label="排名"> </el-table-column>
                        <el-table-column prop="word" label="关键字"> </el-table-column>
                        <el-table-column prop="count" label="搜索数量"> </el-table-column>
                        <el-table-column prop="user" label="搜索用户数"> </el-table-column>
                        <el-table-column prop="range" label="搜索占比"> </el-table-column>
                    </el-table>
                    <el-pagination layout="prev, pager, next" :total="tableTotalData.length"
                        v-model:current-page="currentPage" :page-size="pageSize">
                    </el-pagination>
                </div>
            </div>
        </el-card>

        <!-- 右边分类销售排行 -->
        <el-card shadow="hover" class="view">
            <template #header>
                <div>分类销售排行</div>
                <el-radio-group v-model="radioSelect" size="small">
                    <el-radio-button label="品类"></el-radio-button>
                    <el-radio-button label="商品"></el-radio-button>
                </el-radio-group>
            </template>

            <div class="search-view">
                <v-chart :option="getPieOption()" autoresize />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "BottomView",
});
</script>

<script setup lang="ts">
import useDataStore from "@/stores/mock";
import { computed, ref } from "vue";

const radioSelect = ref("品类");
const currentPage = ref(1);
const pageSize = ref(5);
const dataStore = useDataStore();
const searchWord = computed(() => dataStore.mockData.searchWord);
const saleRank = computed(() => dataStore.mockData.saleRank);

const tableTotalData = computed(() => {
    if (!searchWord.value) return [];
    return searchWord.value.map((item, index) => ({
        ...item,
        rankNo: index + 1,
        range: ((item.user / item.count) * 100).toFixed(2) + "%",
    }));
});

//表格数据通过当前页和每页数据计算得来
const tableData = computed(() => {
    return tableTotalData.value.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
    );
});

const lineChartData = computed(() => {
    const data = {
        wordList: [] as string[],
        userList: [] as number[],
        countList: [] as number[],
        totalUser: 0,
        totalCount: 0,
    };
    if (tableTotalData.value && tableTotalData.value.length > 0) {
        tableTotalData.value.forEach((item) => {
            data.wordList.push(item.word);
            data.userList.push(item.user);
            data.countList.push(item.count);
            data.totalUser += item.user;
            data.totalCount += item.count;
        });
    }

    return data;
});


const pieChartData = computed(() => {
    const data = {
        categoryList: [] as any[],
        cTotal: 0,
        goodsList: [] as any[],
        gTotal: 0,
    };

    if (saleRank.value) {
        const {
            category: { axisX, data1 },
            goods: { axisX: axisX2, data1: data2 },
        } = saleRank.value;
        const total = data1.reduce((pre, item) => pre + item, 0);
        data.cTotal = total;

        axisX.forEach((item, index) => {
            const percent = ((data1[index] / total) * 100).toFixed(2) + "%";
            data.categoryList.push({
                name: item + "|" + percent,
                value: data1[index],
                percent,
                labelName: item,
            });
        });

        const total2 = data2.reduce((pre, item) => pre + item, 0);
        data.gTotal = total2;
        axisX2.forEach((item, index) => {
            const percent = ((data2[index] / total2) * 100).toFixed(2) + "%";
            data.goodsList.push({
                name: item + "|" + percent,
                value: data2[index],
                percent,
                labelName: item,
            });
        });
    }

    return data;
});

//左边图表配置
const getLineOption = (listName: "userList" | "countList", name: string) => {
    return {
        xAxis: {
            // type: "category",
            data: lineChartData.value.wordList,
        },
        yAxis: {
            show: false,
        },
        series: [
            {
                name, // 名称
                type: "line",
                // 列表数据
                data: lineChartData.value[listName],
                // 线条光滑
                smooth: true,
                // 区域的样式
                areaStyle: {
                    color: "deepskyblue",
                },
                // 点项的样式
                itemStyle: {
                    opacity: 0,
                },
                // 线的样式
                lineStyle: {
                    color: "red",
                },
            },
        ],
        // 图表在坐标中显示的位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
        // 显示提示
        tooltip: {
            trigger: "axis",
        },
    };
};

//右边图表配置
const getPieOption = () => {
    const { categoryList, goodsList, cTotal, gTotal } = pieChartData.value;

    const list = radioSelect.value === "品类" ? categoryList : goodsList;
    const total = radioSelect.value === "品类" ? cTotal : gTotal;

    return {
        // 标题如果是一个数组,则代表有多个标题
        title: [
            //第一个标题
            {
                //标题文本
                text: `${radioSelect.value}分布`,
                //标题样式
                textStyle: {
                    fontSize: 30,
                    color: "yellow",
                },
                //标题的位置
                left: 120,
                top: 20,
            },

            //第二个标题
            {
                text: "累计订单量", //标题内容
                subtext: total, //副标题内容
                textStyle: {
                    //标题样式
                    fontSize: 14,
                    color: "hotpink",
                },
                subtextStyle: {
                    //副标题样式
                    fontSize: 28,
                    color: "orange",
                },
                left: "34.5%",
                top: "42.5%",
                textAlign: "center", //以定义的坐标为自己文字的中点
            },
        ],

        //图例
        legend: {
            //垂直摆放图例
            orient: "vertical",
            //图例的定位
            left: "70%",
            top: "middle",
            // 图例的样式
            textStyle: {
                color: "blue",
                fontStyle: "italic",
            },
        },
        //图标配置
        series: [
            {
                name: `${radioSelect.value}分布`,
                // 列表数据
                data: list,

                type: "pie",
                // 中心点坐标
                center: ["35%", "50%"],
                // 圆环的半径
                radius: ["20%", "50%"],
                // 不用防止标签文本与图重叠(圆环图)
                avoidLabelOverlap: false,
                // 间隔区域样式
                itemStyle: {
                    borderColor: "red",
                    borderWidth: 0,
                },
                // 图表项的标题
                label: {
                    // 在环的外侧
                    position: "outside",
                    // 指定特定标题
                    formatter: function (params: any) {
                        return params.data.labelName;
                    },
                },
                // 标签的视觉引导线
                labelLine: {
                    length: 30,
                    length2: 10,
                },
            },
        ],
        // 提示
        tooltip: {
            // 整个图表项触发
            trigger: "item",
            // 格式化提示内容及样式
            formatter: (params: any) => {
                /* 
                data: 当前项数据
                marker: 内置提供的圆点标签
                */
                // console.log(params)
                return `${radioSelect.value}分布<br>
                  ${params.marker + params.data.labelName}<br>
                  ${params.marker}数量: ${params.data.value}<br>
                  ${params.marker}占比: ${params.data.percent}
                `;
            },
        },
    };
}; 
</script>

<style lang="scss" scoped>
.bottom-view {
    display: flex;
    margin-top: 20px;

    .view {
        flex: 1;

        &:first-child {
            margin-right: 10px;
        }

        &:last-child {
            margin-left: 10px;
        }

        :deep(.el-card__header) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
        }

        .search-view {
            height: 450px;
            display: flex;
            flex-direction: column;

            .chart-wrap {
                display: flex;

                .chart {
                    flex: 1;

                    &:first-child {
                        margin-right: 5px;
                    }

                    &:last-child {
                        margin-left: 5px;
                    }

                    .title {
                        font-size: 14px;
                        color: #999;
                    }

                    .count {
                        font-size: 22px;
                        color: #333;
                        font-weight: 500;
                        letter-spacing: 2px;
                    }

                    .echarts {
                        height: 50px;
                    }
                }
            }

            .search-table {
                flex: 1;
                margin-top: 20px;

                .el-pagination {
                    text-align: right;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
    